<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/5/13
  Time: 10:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp"%>
<!-- 订单页面 -->

<form class="form-inline" onsubmit="javascript: return false;">
    <div class="form-group">
        <label for="orderNumber">订单号: </label>
        <input autocomplete="off" class="form-control" id="orderNumber">
    </div>
    <div class="form-group">
        <label for="goods">商品: </label>
        <input autocomplete="off" class="form-control" id="goods">
    </div>
    <div class="form-group">
        <label for="status">订单状态: </label>
        <select class="form-control" id="status">
            <option value="-1">全部</option>
            <option value="0">未支付</option>
            <option value="1">已支付</option>
            <option value="2">已取消</option>
        </select>
    </div>
    <div class="form-group">
        <label>注册日期: </label>
        <input class="form-control" readonly autocomplete="off" id="beginRegisterDate"> -
        <input autocomplete="off" readonly class="form-control" id="endRegisterDate">
        <%--        <input name="begin" class="form-control Wdate" style="height: 36px" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" autocomplete="off" id="beginDate"> ---%>
        <%--        <input name="end" autocomplete="off" style="height: 36px" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true})" class="form-control Wdate" id="endDate">--%>
    </div>
    <div class="form-group">
        <button class="btn btn-danger" onclick="querySearch()">搜索</button>
        <button autocomplete="off" class="btn btn-danger" onclick="resetSearch()">重置</button>
    </div>
</form>
<table id="goodsDataTable" class="table table-bordered table-striped"></table>

<div class="modal" id="addGoodsModal" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryAddGoodsModal()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">用户信息</h3>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="imageServerPath">
                    <div class="form-group">
                        <label for="buyer">买家</label>
                        <input class="form-control" autocomplete="off" id="buyer" disabled="disabled" value="45645">
                    </div>
                    <div class="form-group">
                        <label for="buyerphone">买家电话</label>
                        <input class="form-control" autocomplete="off" id="buyerphone" disabled="disabled" value="45645">
                    </div>

                    <div class="form-group">
                        <label for="buyeraddress">买家地址</label>
                        <input class="form-control" autocomplete="off" id="buyeraddress" disabled="disabled">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="destoryAddGoodsModal()" class="btn btn-success">确认</button>

            </div>
        </div>
    </div>
</div>


<div class="modal" id="changeOrders" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button onclick="destoryAddGoodsModal01()" class="close">
                    <span>&times;</span>
                </button>
                <h3 class="modal-title">改变地址</h3>
            </div>
            <div class="modal-body">
                <form>
                    <input type="hidden" id="imageServerPath01">
                    <div class="form-group">
                        <label for="primary_address">原地址：</label>
                        <input class="form-control" autocomplete="off" id="primary_address" disabled="disabled" >

                        <table class="table table-hover table-bordered table-striped" id="dataTable">
                            <thead>
                            <tr>
                                <th>可更改地址：</th>

                            </tr>
                            </thead>
                            <tbody id="users" v-for ="a in addresses" >
                            <tr >

                                <td><input type="radio" name="type00" :value="a.orderAddress.a_id" onclick="editAddress(this)">{{a.orderAddress.a_detail}}</td>
                            </tr>

                            </tbody>
                        </table>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button onclick="destoryAddGoodsModal01()" class="btn btn-danger">取消</button>
                <button class="btn btn-success" onclick="sureCommit()">确认</button>
            </div>
        </div>
    </div>
</div>


<%@ include file="commons/footer.jsp"%>
<script>
    var goodsId01;
    var goodsId02;
    var vm = new Vue({
        el:'#dataTable',
        data:{
            addresses:[]
        }
    })

    $('#goodsDataTable').bootstrapTable({
        // url: 'http://localhost:8080/order',
        url: '${pageContext.servletContext.contextPath}/order',
        method: 'GET',
        columns: [
            // field是返回rows中每个对象的属性名
            {title: '订单ID', field: 'o_id', align: 'center'},
            {title: '订单号', field: 'o_no'},
            {title: '商品', field: 'o_good_title',formatter: formatTitle },
            {title: '订单价格', field: 'o_good_price'},
            {title: '订单数量', field: 'o_num'},
            {title: '订单状态', field: 'o_status',formatter: formatStatus,align: 'center'},
            {title: '下单日期', field: 'o_create_time',formatter: formatTime},
            {title: '操作',formatter: addProcessBtn}
        ],
        /**
         * 决定了在哪边分页：client server, 两种不同的配置决定了服务器端返回的数据格式。
         *  client分页, 服务器端返回的数据  [{}, {}, {}]
         *  server端分页，服务器端返回的数据：{rows:[{}, {}], total: 23}
         */
        sidePagination: 'server',
        pagination: true, //表示使用分页
        toolbar: '#goodsTableToolbar',//设置工具条
        pageList: [10,15,20],

        queryParams: function (params) {

            var orderNumber = $('#orderNumber').val();  //获取查询表单name的值
            var goods = $('#goods').val();
            var status = $('#status').val();
            var begin = $('#beginRegisterDate').val(); //重置name
            var end = $('#endRegisterDate').val(); //重置name

            params.orderNumber = orderNumber;
            params.goods = goods;
            params.status = status;
            params.begin = begin;
            params.end = end;
            return params;
        }

    })
    // 格式化日期
    function formatTime(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }

    function changeGoodsAddress() {

    }
    //订单状态
    function formatStatus(value, rows) {
        if (value ==0){
            return value ="未支付";
        }else if (value ==1){
            return value ="已支付";
        }else if (value ==2){
            return value ="已取消";
        }else if (value ==3){
            return value ="已过期";
        }else if (value ==4){
            return value ="退款状态";
        }
        // return value == '0' ? '女' : '男';
    }

    // 添加操作按钮
    function addProcessBtn(value, row) {
        var OrderId =row.o_id;

        var goodsId002 = row.orderAddress.a_id;
        goodsId01 =goodsId002;
        var AddressUserId=row.orderAddress.u_id;

        return[
            '<button onclick="getUserAddress(' + OrderId + ')" class="btn btn-danger btn-xs">查看详情</button>&nbsp&nbsp;',
            '<button onclick="changeOrderAddress(' + OrderId+','+AddressUserId + ')" class="btn btn-primary btn-xs">修改地址</button>'
        ].join("")
    }
    //当内容长度大于30的时候，多余的不显示
    function formatTitle(value) {
        var length = value.length; //获取文本长度
        if(length > 30) {
            return value.substring(0, 31) + '...';
        }
        return value;
    }

    // 隐藏模态框
    function destoryAddGoodsModal() {

        $('#addGoodsModal').modal('hide');
    }
    // 隐藏模态框
    function destoryAddGoodsModal01() {

        $('#changeOrders').modal('hide');
    }
    //查看详情
    function getUserAddress(OrderId) {
        $('#buyer').val('');
        $('#buyerphone').val('');
        $('#buyeraddress').val()

        $.ajax({
            // url: "http://localhost:8080/order+..",
            url: '${pageContext.servletContext.contextPath}/order/'+OrderId,
            type: 'get',
            dataType: 'json',

            success: function(_data) {
                $('#buyer').val(_data.orderAddress.a_name)
                $('#buyerphone').val(_data.orderAddress.a_phone)
                $('#buyeraddress').val( _data.orderAddress.a_detail)
            }
        })
        $('#addGoodsModal').modal('show');
    }
    function changeOrderAddress(o_id,u_id){

        $('#changeOrders').modal('show');
        vm.addresses=[];
        //获取原地址
        $.ajax({
            url:'${pageContext.servletContext.contextPath}/order/'+o_id,
            type: 'get',
            dataType: 'json',
            success: function(_data) {
                //渲染原地址
                $('#primary_address').val( _data.orderAddress.a_detail)
            }
        })

        //根据u_id获取用户可选的收货地址

        $.ajax({
            url:'${pageContext.servletContext.contextPath}/order/uid/'+u_id,
            type:'get',
            dataType:'json',
            success: function(_data){
                for(var i = 0; i < _data.length; i++) {
                    vm. addresses.push(_data[i])
                }

            }
        })

    }

    function editAddress(btnTag){
        var aid = $(btnTag).attr('value');
        console.log(aid);
        goodsId02 = aid;
    }

    function sureCommit(){

        var uid=goodsId01;
        var aid =goodsId02;
        console.log(uid);
        console.log(aid);
        $.ajax({
                url:'${pageContext.servletContext.contextPath}/order/'+aid+'/'+uid,
                type: 'get',
                dataType: 'json',
                success:function (_data) {
                    if (_data.code > 0) {
                        destoryAddGoodsModal01();
                        $('#goodsDataTable').bootstrapTable('refresh');
                    }
                }

            }
        )}

    // 格式化日期
    function formatTime(value) {
        return moment(value).format('YYYY-MM-DD HH:mm:ss')
    }

    function destoryAddGoodsModal01() {

        $('#changeOrders').modal('hide');
    }

    $('#beginRegisterDate, #endRegisterDate').datetimepicker({
        // 格式化 yyyy-mm-dd hh:ii:ss 年-月-日 时-分-秒
        format: 'yyyy-mm-dd hh:ii:ss'
    })

    // 搜索
    function querySearch() {
        $('#goodsDataTable').bootstrapTable('refresh');
    }

    function resetSearch() {
        $('#orderNumber').val(''); //重置name
        $('#goods').val(''); //重置性别
        $('#status').val('-1'); //重置状态
        $('#beginRegisterDate').val('');
        $('#endRegisterDate').val('');
        querySearch();
    }


</script>
